<template>
  <div class="grid-content bg-purple-light map">
    <el-amap-search-box class="search-box" 
      :search-option="searchOption" 
      :on-search-result="onSearchResult">
    </el-amap-search-box>
    <el-amap :vid="'amapContainer'" 
      :map-manager="amapManager"
      :center="center"
      :zoom="zoom" 
      :plugin="plugin"
      :events="events">
    </el-amap>          
  </div>
</template>
<script>
import VueAMap, { AMapManager } from 'vue-amap' // eslint-disable-line
let amapManager = new AMapManager()
export default{
  props: {
  },
  data () {
    return {
      amapManager,
      geocoder: {},
      zoom: 15,
      events: {
        'moveend': () => {
        },
        'zoomchange': () => {
        },
        'click': (e) => {
          var self = this
          let { lng, lat } = e.lnglat
          this.lng = lng
          this.lat = lat
          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({ // eslint-disable-line
            radius: 1000,
            extensions: 'all'
          })
          geocoder.getAddress([lng, lat], function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              if (result && result.regeocode) {
                let geo = result.regeocode.aois
                let location = {
                  lat: '',
                  lng: '',
                  formattedAddress: result.regeocode.formattedAddress
                }
                if (geo.length) {
                  location.lat = geo[0].location.lat
                  location.lng = geo[0].location.lng
                }
                self.$emit('locationClick', location)
              }
            }
          })
        }
      },
      searchOption: {
        city: '深圳',
        citylimit: true
      },
      markers: [],
      center: [121.59996, 31.197646],
      plugin: ['ToolBar', {
        pName: 'Geolocation',
        events: {
          init (o) {
            // o 是高德地图定位插件实例
            o.getCurrentPosition((status, result) => {
              if (result && result.position) {
                this.lng = result.position.lng
                this.lat = result.position.lat
                this.center = [this.lng, this.lat]
                this.loaded = true
              }
            })
          },
          click: (e) => {
            let {lng, lat} = e.lnglat
            this.lng = lng
            this.lat = lat
          }
        }
      }]
    }
  },
  methods: {
    onSearchResult (pois) {
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach(poi => {
          let {lng, lat} = poi
          lngSum += lng
          latSum += lat
          this.markers.push([poi.lng, poi.lat])
        })
        let center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.center = [center.lng, center.lat]
      }
    }
  }
}
</script>
<style>
.amap-geolocation-con{
  z-index: 1999!important;
}
.el-vue-search-box-container{
  z-index: 1999;
}
</style>